const { useState, useContext } = React;
const { Table, message, Row, Col, Spin, Select } = antd;

const columns = [
    {
        title: '周一',
        key: 'week1',
        dataIndex: '0',
    },
];

const big_num = '一二三四五六七八九'.split('').map(item => '第' + item + '节');
const weeks = '一二三四五六七'.split('').map(item => '星期' + item);
const weekSelect = Array.from({ length: 20 }, (_, index) => index).map(week => (
    <Select.Option key={week.toString()} value={week + 1}>
        第{week + 1}周
    </Select.Option>
));

function translateToList(datas) {
    return datas.reduce(
        (result, item) => {
            const { day, section } = item;
            result[section - 1][day] = item;
            result[section][day] = item;
            return result;
        },
        Array.from(big_num, item => [item, ...Array.from({ length: 7 }, () => undefined)])
    );
}

const emptyScheduleList = translateToList([]);

function Load() {
    const identity = useContext(IdentityContext);
    const [week, setWeek] = useState(1);
    const [teacherId, setTeacherId] = useState(null);
    const {
        data: days = emptyScheduleList,
        loading,
        run: fetchScheduleList,
    } = useRequest(
        (week = 1, teacherId) => {
            return new Promise(resolve => {
                request
                    .get('/classSchedule/scheduleList', {
                        params: {
                            week: week,
                            teacher_id: teacherId,
                        },
                    })
                    .then(res => {
                        console.log(res);
                        resolve(translateToList(res));
                    })
                    .catch(err => {
                        console.log(err);
                        resolve([]);
                        message.error('获取课表信息失败');
                    });
            });
        },
        { manual: false }
    );

    const { loading: loadingOfTeacher, data: teacherList = [] } = useRequest(
        () => {
            return new Promise(resolve => {
                request
                    .get('/teacher/teacherList')
                    .then(res => {
                        console.log(res);
                        resolve(res);
                    })
                    .catch(err => {
                        resolve([]);
                        console.log(err);
                    });
            });
        },
        {
            manual: false,
        }
    );

    return (
        <Spin spinning={loading}>
            <div style={{ boxSizing: 'border-box', padding: '10px' }}>
                <Row style={{ marginBottom: '10px' }}>
                    <Col span={6}>
                        周次：
                        <Select
                            allowClear
                            onChange={val => {
                                setWeek(val);
                                fetchScheduleList(val, teacherId);
                            }}
                            defaultValue={1}
                            value={week}
                            placeholder='请选择课表周次'>
                            {weekSelect}
                        </Select>
                    </Col>

                    {identity.type == 3 ? (
                        <Col span={6}>
                            老师：
                            <Select
                                loading={loadingOfTeacher}
                                allowClear
                                placeholder='请选择老师'
                                value={teacherId}
                                onChange={val => {
                                    setTeacherId(val);
                                    fetchScheduleList(week, val);
                                }}>
                                {teacherList.map(item => (
                                    <Select.Option value={item.no}>{item.name}</Select.Option>
                                ))}
                            </Select>
                        </Col>
                    ) : null}
                </Row>
                <Row style={{ marginBottom: 20 }}>
                    <Col span={3}></Col>
                    {weeks.map(item => (
                        <Col key={item} span={3}>
                            {item}
                        </Col>
                    ))}
                </Row>
                {days.map((day, col) => {
                    return (
                        <Row>
                            {day.map((item, line) => {
                                if (line === 0)
                                    return (
                                        <Col key={`${col}-${line}`} style={{ height: 75 }} span={3}>
                                            {item}
                                        </Col>
                                    );
                                if (!item) return <Col key={`${col}-${line}`} style={{ height: 75 }} span={3}></Col>;
                                return (
                                    <Col key={item.id} style={{ height: 75 }} span={3}>
                                        <div>{item.teacher.name}</div>
                                        <div>{item.course.name}</div>
                                        <div style={{ fontSize: 12 }}>
                                            <span style={{ color: 'red' }}>{item.classroom.name}</span> @ {item.classroom.position}
                                        </div>
                                    </Col>
                                );
                            })}
                        </Row>
                    );
                })}
            </div>
        </Spin>
    );
}
